
import * as echarts from "echarts";
import { ref } from "vue";



// 转换数组
const transformData = (data: any[][]): any[][] => {
  // 创建一个与输入数据长度相对应的结果数组
  const result = Array.from({ length: data[0].length - 1 }, () => []);
  // 遍历每个子数组
  for (const item of data) {
    for (let i = 1; i < item.length; i++) {
      result[i - 1].push(item[i]);
    }
  }

  return result;
}


// 封装毫秒时间转换方法
export const formatTimestampWithMicroseconds = (timestamp: number) => {
  // 提取秒和微秒部分
  const seconds = Math.floor(timestamp);
  const microseconds = Math.round((timestamp - seconds) * 1000);
  const date = new Date(seconds * 1000);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const secondsFormatted = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${secondsFormatted}.${String(microseconds).padStart(3, "0")}`;
};

// 将日期格式化为 yyyy-MM-dd 格式的封装方法
export const formatDate = (dateString: string): string => {
  const date = new Date(dateString);
  // 确保输入的字符串是有效日期
  if (isNaN(date.getTime())) {
    throw new Error('Invalid date string');
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0'); // 确保是两位数字
  return `${year}-${month}-${day}`;
};




/**
* 使用双向链表处理数组的第一项操作（优化版）
* @param {Array} array - 原数组
* @param {string} operation - 操作方式（'delete' 或 'add'）
* @param {*} value - 只有在 operation 为 'add' 时需要传入的值
* @returns {Array} 处理后的数组
*/
export function processFirstItem(array, operation, value) {
  // 对象池：复用 Node 对象
  const nodePool = [];
  function createNode(value) {
    if (nodePool.length > 0) {
      const node = nodePool.pop();
      node.value = value;
      node.next = null;
      node.prev = null;
      return node;
    }
    return { value, next: null, prev: null };
  }

  function releaseNode(node) {
    nodePool.push(node);
  }

  // 定义双向链表
  class DoublyLinkedList {
    constructor() {
      this.head = null;
      this.tail = null;
      this.length = 0;
    }

    // 将数组转换为双向链表
    fromArray(array) {
      for (const item of array) {
        this.push(item);
      }
    }

    // 在链表末尾添加元素
    push(value) {
      const newNode = createNode(value);
      if (!this.head) {
        this.head = newNode;
        this.tail = newNode;
      } else {
        newNode.prev = this.tail;
        this.tail.next = newNode;
        this.tail = newNode;
      }
      this.length++;
    }

    // 删除链表的第一项
    shift() {
      if (!this.head) return null;
      const removedNode = this.head;
      if (this.length === 1) {
        this.head = null;
        this.tail = null;
      } else {
        this.head = removedNode.next;
        this.head.prev = null;
      }
      this.length--;
      releaseNode(removedNode); // 释放节点到对象池
      return removedNode.value;
    }

    // 在链表开头添加元素
    unshift(value) {
      const newNode = createNode(value);
      if (!this.head) {
        this.head = newNode;
        this.tail = newNode;
      } else {
        newNode.next = this.head;
        this.head.prev = newNode;
        this.head = newNode;
      }
      this.length++;
    }

    // 将链表转换为数组
    toArray() {
      const array = [];
      let current = this.head;
      while (current) {
        array.push(current.value);
        current = current.next;
      }
      return array;
    }
  }

  // 创建双向链表并初始化
  const list = new DoublyLinkedList();
  list.fromArray(array);

  // 根据操作类型处理
  if (operation === 'delete') {
    list.shift(); // 删除第一项
  } else if (operation === 'add') {
    if (value === undefined) {
      throw new Error("当操作类型为 'add' 时，必须传入 value 参数");
    }
    list.unshift(value); // 在第一项添加值
  } else {
    throw new Error("操作类型必须是 'delete' 或 'add'");
  }

  // 返回处理后的数组
  return list.toArray();
}



// 历史数据-电气接口方法
export const transHistoryData = (scssData: any[], labels: string[], fields: string[]): any[] => {
  // processFirstItem(data,'delete')
  const result: any[] = [labels]; // 初始化结果数组，将 labels 作为第一行

  // 创建一个字段集（set）来优化属性存在性的检查
  const fieldsSet = new Set(fields);

  // 优化：使用传统的 for 循环替代 for...of 和 forEach
  for (let i = 0; i < scssData.length; i++) {
    const data = scssData[i];
    const row = new Array(fields.length + 1);  // 预分配数组空间，避免频繁扩展

    row[0] = data.dataTime;  // 每一行的第一个字段是 dataTime

    // 遍历 fields 数组并将值放入 row
    let j = 1;  // 从索引 1 开始，因为 0 是 dataTime
    for (let field of fields) {
      if (fieldsSet.has(field) && field in data) {
        row[j++] = data[field];
      } else {
        row[j++] = null;  // 如果字段不存在，推入 null 或其他默认值
      }
    }

    // 将当前行加入结果数组
    result.push(row);
  }

  return result;
};


// 检查 localStorage 是否已有数据
export const getDataFromLocalStorage = () => {
  const savedData = localStorage.getItem('myData')
  if (savedData) {
    // 如果有数据，解析并返回
    return JSON.parse(savedData)
  } else {
    // 如果没有数据，返回 null
    return null
  }
}
// 溫度數據方法
export const constfunction = (originalData: string | any[]) => {
  const result = [];

  // 提取所有 labelName 作为第一行
  const labelNames = [];
  for (let i = 0; i < originalData.length; i++) {
    labelNames.push(originalData[i].labelName);
  }
  result.push(labelNames);

  // 提取第一个数据项的时间戳，这假设所有 dataArr 的时间戳是一致的
  const dataTimeArr = originalData[0].dataArr.map((item: { dataTime: any; }) => item.dataTime);

  // 创建一个二维数组存储时间戳对应的所有 labelName 数据
  // 遍历时间戳，然后遍历所有的数据进行填充
  const rows = [];
  for (let i = 0; i < dataTimeArr.length; i++) {
    const time = dataTimeArr[i];
    const row = [time];
    // 这里直接从原始数据中拿出相应的值，不再用 `map` 和嵌套查找
    for (let j = 0; j < originalData.length; j++) {
      row.push(originalData[j].dataArr[i].dataValue);
    }
    rows.push(row);
  }

  // 将处理好的行数据添加到结果中
  result.push(...rows);

  return result;
}





// 昨天 今天
export const getTodayAndYesterday = () => {
  const today = new Date(); // 获取当前日期
  const yesterday = new Date(today); // 复制当前日期对象，用于计算昨天

  // 设置昨天的日期
  yesterday.setDate(today.getDate() - 2);

  // 格式化日期为 yyyy-mm-dd
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要加1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  // 返回结果
  return {
    startTime: formatDate(yesterday), // 昨天
    endTime: formatDate(today)        // 今天
  };

  // const result = getTodayAndYesterday();
  // console.log(result);

}

// 数据聚合示例
export const aggregateData = (data: any[], step = 10) => {
  const aggregated = [];
  for (let i = 0; i < data.length; i += step) {
    const avg = data.slice(i, i + step).reduce((sum: any, value: any) => sum + value, 0) / step;
    aggregated.push(avg);
  }
  return aggregated;
  // const aggregatedData = aggregateData(dataY, 10);  // 每 10 个点做一次平均

}




export const transformDataOptimized = (inputData: any[]) => {
  let result = [];

  // 1. 提取 labelNames，作为第一行
  let labelNames = inputData.map(item => item.labelName);
  result.push(labelNames);

  // 2. 使用 Map 来存储时间点及对应的所有设备值
  let timeMap = new Map();

  // 遍历原始数据，将每个时间点的数据存入 Map
  inputData.forEach(item => {
    item.dataArr.forEach(dataItem => {
      let time = dataItem.dataTime;
      if (!timeMap.has(time)) {
        timeMap.set(time, []);
      }
      timeMap.get(time).push(dataItem.dataValueArr);
    });
  });

  // 3. 获取所有的时间点并排序
  let times = Array.from(timeMap.keys()).sort();

  // 4. 根据时间点生成数据行
  times.forEach(time => {
    let timeRow = [time, ...timeMap.get(time)];
    result.push(timeRow);
  });

  return result;
}







interface chartBomType {
  typeColor: any;
  barColor: any;
  name: string;
  unit: string;
}
// echars折线图封装
export const currentFun = (
  chartDom: { value: HTMLElement | null | undefined },
  chartObj: chartBomType,
  echData: any,
  guiName:string
) => {
  console.log("===数据参数=====>",echData)
  if (!chartDom) return;
  const isLeng = ref(false)
  const chatHead = echData[0]
  // 处理底部数量超出4个
  if (chatHead.length > 4) {
    isLeng.value = true
  } else {
    isLeng.value = false
  }

  const xAxisData = echData.slice(1)
  // const chatCon = echData.slice(1).map((item: any[]) => formatTimestampWithMicroseconds(item[0]))
  const chatCon = echData.slice(1).map((item: any[]) => item[0])

  const chartInstance = echarts.init(chartDom.value);
  var charts = {
    unit: chartObj.unit,
    names: chatHead,
    lineX: chatCon,
    value: transformData(xAxisData),
  };
  // 折线的颜色   
  var color = chartObj.barColor;
  var lineY = [];

  for (var i = 0; i < charts.names.length; i++) {
    var x = i;
    if (x > color.length - 1) {
      x = color.length - 1;
    }
    var data = {
      name: charts.names[i],
      type: "line",
      large: true,  // 启用大数据量优化
      sampling: "lttb", // 最大程度保证采样后线条的趋势，形状和极值。
      // 开启渐进式渲染
      progressive: 2000,
      largeThreshold: 2000,  // 设置大数据量的阈值
      progressiveThreshold: 5000,

      color: color[x] + ")",
      smooth: false,// 关键点：禁用平滑曲线，使其变为直线
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: color[x] + ", 0)",
                //   color: color[x] + ", 0.3)",
              },
              {
                offset: 0.8,
                color: color[x] + ", 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
          shadowBlur: 10,
        },
      },
      symbol: "circle",
      symbolSize: 5,
      data: charts.value[i],
    };
    lineY.push(data);
  }
  // 箭头设置
  lineY[0].markLine = {
    silent: true,
    data: [],
  };
  const option = {
    animation: false,  // 禁用动画
    //   backgroundColor: "#151515", //背景色
    backgroundColor: "#1b1e27", //背景色
    title: {
      text: `{titleIcon|}  ${guiName}->${chartObj.name}（ ${chartObj.unit} ） `,
      // subtext: `{titleIcon|} - ${chartObj.name}`,
      left: "10", // 可以设置为 'left', 'right' 或 'center'
      top: "10", // 也可以设置为 'bottom'
      subtextStyle: {
        color: "#ffffff", // 设置副标题颜色
        fontSize: 14, // 可选：设置字体大小
      },
      textStyle: {
        fontSize: 16,
        color: '#fff',
        rich: {
          // 定义 icon 图标的样式
          titleIcon: {
            width: 14,       // 图标的宽度
            height: 14,      // 图标的高度
            backgroundColor: chartObj.typeColor, // 背景色
            borderRadius: 15, // 圆角半径
            margin: [25, 25],  // 内边距
            align: 'center',  // 图标的对齐方式
            verticalAlign: 'middle' // 垂直居中
          }
        }
      }
    },
    tooltip: {
      trigger: "axis",
    },
    // dataZoom: [{
      // type: 'inside',  // 使用内部缩放   
      // start: 20,       // 设置初始缩放比例
      // end: 60          // 设置初始缩放比例
      // type: 'slider',  // 使用滑动条框选
      // xAxisIndex: 0,   // 选择哪个坐标轴进行框选
      // start: 20,       // 初始框选的起始位置
      // end: 60          // 初始框选的结束位置
    // }],
    // dataZoom: [
    //   {
    //     type: 'slider', // 显示缩放滑块
    //     start: 30, // 默认框选范围的起始百分比（30%）
    //     end: 70, // 默认框选范围的结束百分比（70%）
    //     show: false, // 隐藏缩放滑块
    //   },
    //   {
    //     type: 'inside', // 内置缩放（禁用鼠标滚轮缩放）
    //     disabled: true, // 禁用内置缩放
    //   },
    // ],
    // dataZoom: [
    //   {
    //     type: "slider", // 滑块型缩放
    //     start: 0, // 起始百分比
    //     end: 50, // 结束百分比
    //     show: false, // 也可以隐藏滑动条
    //     filterMode: 'none'
    //   },
    //   {
    //     type: "inside", // 内置型缩放
    //     start: 0,
    //     end: 50,
    //     show: false, // 也可以隐藏滑动条
    //     filterMode: 'none'
    //   },
    // ],
    toolbox: {
      show: true,
      right: "2%",
      top: "2%",
      itemSize: 20,  // 工具箱图标的大小
      iconStyle: {
        normal: {
          //   color: '#ffffff',  // 设置默认状态下图标的颜色为红色
          borderColor: '#ffffff',  // 设置边框颜色
          borderWidth: 1  // 设置边框宽度
        },
        emphasis: {
          color: '#ffffff',  // 设置鼠标悬停时图标的颜色为绿色
        }
      },
      // icon: "path://M8 0h8v8H8V0zm0 16h8v-8H8v8zM0 8h8v8H0V8zm16 0h8v8h-8V8z",
      feature: {
        myFullScreen: {
          show: true,
          title: "",  
          icon: "image://https://yangtao.xyz/zhong_image/suoxiao1.png",
          color: '#ffffff',
          onclick: function () {
            const chartDom1 = chartInstance.getDom();
            // fullscreenElement
            if (!document.fullscreenElement) {
              chartDom1.requestFullscreen();
              chartInstance.resize(); // 进入全屏时调整大小
            } else {
              document.exitFullscreen();
            }
          },
        },
        // dataZoom: { // 启用框选放大功能
        //   title: '框选放大', // 鼠标悬停时显示的标题
        // },
        // restore: { // 重置缩放
        //   title: '重置',
        // },
        dataZoom: {
          // 缩放工具
          yAxisIndex:"none",
          // show: false,
        },
        restore: {
          // 恢复默认视图
          show: false,
        },
      },
    },
    legend: {
      data: charts.names,
      textStyle: {
        fontSize: isLeng.value ? 12 : 18,
        // fontSize: 18,
        color: "#ffffff", //legend 的颜色
      },
      bottom: 10,
      right: isLeng.value ? "10%" : "40%",
      // right: "35%",
      // itemHeight: 18, // 设置图例项的高度
      itemGap: 2,    // 设置图例项之间的间距
    },
    grid: {
      top: "14%",
      left: "3%",
      right: "1%",
      bottom: "12%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: charts.lineX,
      axisLabel: {
        // x轴的数字颜色
        textStyle: {
          fontSize: 12,
          color: "#ffffff",
        },
        formatter: function (params: string) {
          return params.split(" ")[0] + "\n" + params.split(" ")[1];
        },
      },
    },
    yAxis: {
      // name: charts.unit, //电流单位
      type: "value",
      axisLabel: {
        formatter: "{value}",
        //   数字颜色
        textStyle: {
          color: "#ffffff",
        },
      },
      // 标线的颜色
      splitLine: {
        lineStyle: {
          color: "rgb(23,255,243,0.3)",
        },
      },
      // 单位的颜色
      axisLine: {
        lineStyle: {
          color: "#ffffff",
        },
      },
    },
    series: lineY,
  };
  document.addEventListener("fullscreenchange", () => {
    chartInstance.resize(); // 监听全屏变化
  });    
  chartInstance.setOption(option);
};


// 饼图封装
export const binDraw = (chartDom: { value: HTMLElement | null | undefined },
  echData: any)=>{
    if (!chartDom) return;
    const chartInstance = echarts.init(chartDom.value);
    const option = {
      // 环形图中间默认显示文字
      color: ['#fcfeff', '#5494c1', '#0000ff', '#ffff00', '#800080'], // 自定义颜色
      title: {
         show: true,
         text: echData.number,
         itemGap: 10, //主副标题之间的距离
         x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
         y: "40%",
         subtext: echData.titleName,
         textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 32,
            color: "#ffffff"
         },
         subtextStyle: {
            //副标题文本样式{"color": "#aaa"}
            fontSize: 16,
            fontWeight: "bold",
            color: "#929597"
         }
      },
      // 提示框的样式
      tooltip: {
         backgroundColor: "#fff",
         extraCssText: "box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);",
         textStyle: {
            color: "#000"
         },
        //  formatter: param => {
        //    let { name, value } = param;
        //    let result = `<div>${name}：${value}(个)</div>`;
        //    return result;
        //  }
      },
      grid: {
         top: "0%",
         left: "0%",
         right: "0%",
         bottom: "0%",
         containLabel: true
      },
      // legend: {
      //    orient: "horizontal",
      //   //  itemWidth: 16,
      //    itemHeight: 16,
      //    icon: "circle",
      //    right: 40,
      //    bottom: "0%",
      //    textStyle: {
      //       color: "rgba(0,0,0,0.65)"
      //    },
      //    height: 10,
   
      //    formatter: name => {
      //       const value = echData.find(item => item.name === name).value;
      //       return `${name}：${value} 人`;
      //    }
      // },
      series: [
         {
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "45%"],
            label: {
               // 鼠标悬浮具体数据显示
               show: false
            },
            data: echData.data
         }
      ]
   }
   chartInstance.setOption(option);
}


// 横向柱状图







// echars饼状图封装
